<template>
  <el-dialog
    title="洗车机信息"
    :visible.sync="dialogVisible"
    width="80%"
    center
    :before-close="handleClose"
  >
    <div class="content">
      <p class="pb-20">
        <span class="item-name">所属商户号：</span>
        <span v-if="info.merchantList && info.merchantList.length">{{
          info.merchantList[0].merchant_Num || "--"
        }}</span>
        <span v-else>--</span>
      </p>
      <div
        class="pb-20 relation"
        v-if="!info.merchantList || info.merchantList.length === 1"
      >
        <span class="item-name">所属关系：</span>
        <div>
          <p v-if="!info.merchantList">--</p>
          <p v-else>
            {{ info.merchantList[0].store_Name }}
          </p>
        </div>
      </div>
      <div
        class="pb-20 flex"
        v-if="info.merchantList && info.merchantList.length > 1"
      >
        <span class="item-name">所属关系：</span>
        <el-table
          :data="info.merchantList"
          border
          :highlight-current-row="true"
          :header-cell-style="{
            textAlign: 'center',
            backgroundColor: '#eee'
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="merchant_TypeName" label="合作类型">
          </el-table-column>
          <el-table-column prop="store_Name" label="所属代理商">
          </el-table-column>
        </el-table>
      </div>
      <p class="pb-20">
        <span class="item-name">所属洗车站：</span>
        <span>{{ info.station_Name || "--" }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">站点类型：</span>
        <span v-if="info.merchantList">{{
          info.merchantList.length === 1 ? "普通站点类型" : "合伙站点类型"
        }}</span>
        <span v-else>--</span>
      </p>
      <div class="pb-20 flex" v-if="info.address">
        <span class="item-name">站点地址：</span>
        <div>
          <div>{{ info.address }}</div>
          <div class="mt-10">
            <span class="pr-20">经度：{{ info.lon }}</span>
            维度：{{ info.lat }}
          </div>
        </div>
      </div>
      <p class="pb-20">
        <span class="item-name">设备类型：</span>
        <span>{{
          info.machineTypeDesc === "全自动" ? "自动洗车机" : "自助洗车机"
        }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">平台编号：</span>
        <span>{{ info.machine_Code || "--" }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">设备信息：</span>
        <span>
          <span class="pr-20">厂家：{{ info.suppliers_Name }}</span>
          <span class="pr-20">系列：{{ info.series_Name || "--" }}</span>
          <span class="pr-20">型号：{{ info.type_Name || "--" }}</span>
          <span class="pr-20">版本：{{ info.hardwareVersion || "--" }}</span>
          <span>质保：{{ info.warranty }}</span>
        </span>
      </p>
      <p class="pb-20">
        <span class="item-name">设备编号：</span>
        <span>{{ info.wash_Machine_Id }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">物联网卡号：</span>
        <span>{{ info.lotNo }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">软件版本号：</span>
        <span>{{ info.softwareVersion || "--" }}</span>
      </p>
      <p class="pb-20">
        <span class="item-name">设备价格：</span>
        <span>{{ info.device_Cost }}元</span>
      </p>
      <p class="pb-20">
        <span class="item-name">设备启动码：</span>
        <vue-qr
          :text="qrtext"
          :margin="0"
          colorDark="#333"
          colorLight="#fff"
          :size="100"
        ></vue-qr>
      </p>
      <p class="pad-t-b-10">
        <span class="item-name">创建时间：</span>
        <span class="pr-20">{{ addTime }}</span>
        <span>{{ info.creatorName }}</span>
      </p>
      <p class="">
        <span class="item-name">更新时间：</span>
        <span class="pr-20">{{ updateTime }}</span>
        <span>{{ info.modifierName }}</span>
      </p>
    </div>
  </el-dialog>
</template>
<script>
import dayjs from "dayjs";
import vueQr from "vue-qr";

export default {
  name: "equipmentInfo",

  data() {
    return {
      info: {},
      addTime: "",
      updateTime: "",
      qrtext: ""
    };
  },

  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },

    params: {
      type: String,
      default: ""
    }
  },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.getMachineInfo();
      }
    }
  },

  methods: {
    // 获取自助洗车机信息
    getMachineInfo() {
      this.$api.equipments
        .getMachineInfo_2({
          id: this.params // "dengyujie3"
        })
        .then(res => {
          this.info = res.data;
          this.addTime = dayjs(res.data.addTime).format("YYYY-MM-DD HH:mm:ss");
          this.updateTime = dayjs(res.data.updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          const type = res.data.machineTypeDesc === "全自动" ? "1" : "0";
          this.qrtext =
            "https://lineapi.yzsheng.com/pages_commodity?id=" +
            res.data.wash_Machine_Id +
            "&type=existingOrder&machineType=" +
            type;
        })
        .catch(err => {
          console.log(err);
        });
    },

    handleClose() {
      this.$emit("close");
    }
  },

  components: {
    vueQr
  }
};
</script>
<style lang="scss" scoped>
.el-dialog__header {
  background: #f1f1f1 !important;
}

.content {
  background: #fff;
}
.item-name {
  display: inline-block;
  width: 40%;
  text-align: right;
  vertical-align: top;
}
.pb-20 {
  padding-bottom: 20px;
}
.pr-20 {
  padding-right: 20px;
}
.name-list {
  border: 1px solid #ccc;
  padding: 5px 20px;
}
.item {
  display: flex;
  line-height: 20px;
}
.item-left {
  text-align: right;
  padding-right: 10px;
}
.relation {
  display: flex;
}
</style>
